<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Basic input types</title>
    <style>
      html, input {
        font-family: sans-serif;
      }

      body {
        width: 90%;
        max-width: 500px;
        margin: 0 auto;
      }

      form {
        margin-top: 20px;
      }

      div {
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      label, input, button {
        font-size: 14px;
        line-height: 1.5
      }

      label {
        text-align: right;
        width: 30%;
        margin-right: 2%;
      }

      input {
        flex: auto;
      }

      button {
        width: 70%;
        margin: 0 auto;
      }

    </style>
   </head>
  <body>
    <form>
      <div>
        <label for="text">text input type: </label>
        <input type="text" id="text" name="text">
      </div>
      <div>
        <label for="pwd">password input type: </label>
        <input type="password" id="pwd" name="pwd">
      </div>
      <div>
        <label for="email">email input type: </label>
        <input type="email" id="email" name="email">
      </div>
      <div>
        <label for="url">url input type: </label>
        <input type="url" id="url" name="url">
      </div>
      <div>
        <label for="number">number input type: </label>
        <input type="number" id="number" name="number">
      </div>
      <div>
        <label for="tel">tel input type: </label>
        <input type="tel" id="tel" name="tel">
      </div>
      <div>
        <label for="search">search input type: </label>
        <input type="search" id="search" name="search">
      </div>
      <div>
        <button>Submit</button>
      </div>
    </form>
    <script>

    </script>
</body>
  </html>
